<template>
  <div class="MenPiao">
    <van-nav-bar class="navbar" title="跟团游" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
      </template> 
    </van-nav-bar>     
     <!-- 筛选 -->
    <div class="shaixuan">
      <div @click="xiaoliang">
        <span>销量</span>
        <van-icon :name="shang" />
      </div>  
      <div @click="jiage">
        <span>价格</span>
        <van-icon :name="jiang" />
      </div> 
      <div>
        <van-cell @click="showPopup">
          <span class="shai">筛选</span>
          <van-icon name="todo-list-o" size="17px"/>          
        </van-cell>
        <van-popup v-model="show" position="right">
          <div>筛选</div>
          <h5>商品分类</h5>
          <div>
            <van-button type="default">大同</van-button>
            <van-button type="default">五台山</van-button>
          </div>
          <h5>状态</h5>
          <div>
            <van-button type="default">推荐</van-button>
            <van-button type="default">促销</van-button>
            <van-button type="default">新品</van-button>
          </div>
          <div>
            <van-button type="default">热门</van-button>
            <van-button type="default">特价</van-button>
            <van-button type="default">独家</van-button>
          </div>
        </van-popup>
      </div> 
    </div>    
  
      
      <div v-if="gg">
          <div v-for="gen in gg" :key="gen.id">
              <div class="ka">
                <div>
                  <img :src="imgBase + gen.mp_pic" alt="">
                </div>
                <div>
                  <div>{{gen.title}}</div>
                  <div class="wen">
                    <div>
                      <h4>￥:{{gen.price}}</h4>
                      <p>销量:{{gen.spec}}</p>
                    </div>
                    <div class="tubiao">
                      <van-icon name="cart" @click="  tiaozhuan(gen.lid)" color="red" size="35px"/>
                    </div>
                  </div>
                </div>      
              </div>
          </div>
      </div>



  </div>
</template>

<script>
import KaPian from '@/components/KaPian.vue';
import { mapState } from 'vuex';
  export default {
    
  components: { KaPian },
    data() {
      return {
        value:'',
        shang:'arrow-up',
        jiang:'arrow-up',
        show:false,
        date: '',
        shijian: false,
        gg:null,
      
      }
    },
        computed: {
    ...mapState(['imgBase'])
    },
    mounted () {
      this.getGentuan()
      
    },
    methods: {
      getGentuan(){
        const url=`/menpiao?lid=30`
        this.axios.get(url).then(res=>{
          console.log('跟团:',res)
          this.gg=res.data.result
        })
      },
      tiaozhuan(lid){
        this.$router.push({
          path:'/porduct',
          query:{
            id:lid
          }
        })
        },


      onClickLeft(){
       this.$router.go(-1)
      },
      // 筛选
      xiaoliang() {
        if(this.shang=='arrow-up'){
          this.shang='arrow-down'
        }else{
          this.shang='arrow-up'
        }
      },
      jiage(){
        if(this.jiang=='arrow-up'){
          this.jiang='arrow-down'
        }else{
          this.jiang='arrow-up'
        }
      },
      // 展开弹出层
      showPopup(){
        this.show=true
      }
    },
  }
</script>
<style scoped src='../assets/css/kapian.css'></style>
<style  scoped src='../assets/css/menpiao.css'></style>